<template>
  <view
    style="background-color: #000; position: relative"
    :style="{ height: screenHeight + 'px' }"
    v-if="videoData"
  >
    <view class="downLoad">
      <view class="left">
        <u-avatar src="../../static/logo.png" shape="square"></u-avatar>
        <text> Get the full experience on the app</text>
      </view>
      <view class="right">
        <u-button
          @tap="clickDownLoad"
          type="primary"
          size="small"
          shape="circle"
          text="open"
        ></u-button>
      </view>
    </view>

    <!-- 推荐的内容 -->
    <swiper
      class="swiper"
      :style="{ height: screenHeight + 'px' }"
      :vertical="true"
      @change="change"
    >
      <swiper-item
        v-for="(item, index) in videoData"
        :style="{ height: screenHeight + 'px' }"
        :key="item.docid"
        :class="current + 'hhs' + index"
        class="swiper-item"
        v-if="current + 4 > index"
      >
        <videoPlayer
          v-if="current == index && hideSHow"
          :video="item"
          ref="player"
        ></videoPlayer>
        <image
          v-else
          :src="item.Image"
          style="width: 750rpx; height: 500rpx"
          mode="widthFix"
        ></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import videoPlayer from "../components/videoPlayer.vue";
import Likes from "../components/tool.vue";
// var time = null
export default {
  components: {
    videoPlayer,
    Likes,
  },
  name: "video-list",
  data() {
    return {
      current: 0,
      showMenu: false,
      videoData: [],
      page: -1,
      hideSHow: true,
      screenHeight: uni.getSystemInfoSync().windowHeight,
      videoList: [
        // {
        //   url: "https://static.flowshort.tv/video/ep03_上 (1) (2).mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep03_上 (1).mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep03_下.mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep04_上.mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep04_下.mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep08_上新.mp4",
        // },
        // {
        //   url: "https://static.flowshort.tv/video/ep08_下.mp4",
        // },
      ],
    };
  },
  onLoad() {
    this.homeData();
  },
  onHide() {
    this.hideSHow = false;
  },
  onShow() {
    this.hideSHow = true;
  },
  methods: {
    // 切换 显示 再追 还是 推荐
    changeview(s) {
      this.showMenu = s;
    },
    /// 数据
    async homeData() {
      this.page++;
      // let res = await API.getJSON({
      // 	page: this.page,
      // 	type: '影视'
      // })

      uni.request({
        url: "https://api.flowshort.tv/video/discover",
        header: {
          Authorization:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6OSwiZXhwIjoxNzAyNTY3NDg5fQ.ZKWZJw0EKfWMwu4vLUJ1z3TDjnxjwGuT7z4q577S6TQ",
          "content-type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        method: "POST",
        data: {
          Offset: this.page,
          Limit: 5,
        },
        success: (res) => {
          this.videoData = this.videoData.concat(res.data.Data.List);
          // ?.map((item) => {
          //   return {
          //     ...item,
          //     Address:
          //       this.videoList[
          //         Math.floor(Math.random() * this.videoList.length)
          //       ].url,
          //   };
          // });
        },
      });
    },
    change(res) {
      this.current = res.detail.current;

      if (this.current + 3 > this.videoData.length) {
        this.homeData();
      }
    },
    clickDownLoad() {
      uni.navigateTo({
        url: "/pages/downLoad/downLoad",
      });
    },
  },
  watch: {
    myList() {
      this.list = this.myList;
    },
  },
};
</script>

<style lang="scss" scoped>
.downLoad {
  position: fixed;
  top: 0rpx;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //背景颜色渐变
  background: linear-gradient(to right, #fe5d68, #fe7861);
  padding: 0 30rpx;
  z-index: 9999;

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #fff;

    .u-avatar {
      margin-right: 20rpx;
    }
  }

  .right {
    .u-button--primary {
      background-color: #fff;
      border: none;
      color: #fe5d68;
      text-transform: uppercase;
    }
  }
}

.swiper {
  /* position: absolute; */
  width: 750rpx;
  /* height: 500vh; */
}

.swiper-item {
  width: 750rpx;
  /* height: 500vh; */
  z-index: 9;
}

.meun-list {
  width: 750rpx;
  padding: 20upx 0;
  /* height: 100upx; */
  text-align: center;
  position: relative;
  /* line-height: 100upx; */
}

.meun-a {
  /* display: block; */
  position: absolute;
  top: 100rpx;
  width: 125rpx;
  text-align: center;
}
</style>
